<template>
	<view>
		<Navbar></Navbar>
		<u-tabs-swiper ref="tabs" active-color="#B3723E" bg-color="transparent" :is-scroll="false" :current="current" :list="tabList" @change="tabChange"></u-tabs-swiper>
		<view class="u-m-20">
			<view class="u-card-box u-m-b-20 u-flex u-row-between" v-for="item in list" :key="item.id" @click="goDemandDetail(item)">
				<u-image class="u-m-r-20" width="150rpx" height="150rpx" border-radius="10" :src="item.img[0]" v-if="item.img[0]"></u-image>
				<view class="u-flex-1 u-flex-col u-row-between u-ellipsis" style="height: 150rpx;">
					<view class="u-flex u-row-between">
						<view class="u-flex u-ellipsis">
							<view class="status-box">{{ item.demand_name }}</view>
							<view class="u-font-26 u-font-bold u-ellipsis">{{ item.title}}</view>
						</view>
						<view class="u-m-l-10" v-if="[1,2].includes(Number(item.demand_status))">
							<view class="u-back-oramage u-color-white u-font-24 u-radius-10 u-p-10" @click.native.stop="openRefresh(item.id)">
								<u-icon name="reload"></u-icon>
								<span class="u-m-l-5">刷排名</span>
							</view>
						</view>
					</view>
					<view class="u-font-24 u-color-gray">
						<span>需求量：</span>
						<span>{{item.num}}</span>
					</view>
					<view class="u-flex u-row-between u-font-24 u-color-gray">
						<view class="u-flex">
							<u-icon name="clock-fill" size="30"></u-icon>
							<view class="u-m-l-10">{{item.addtime}}</view>
						</view>
						<view class="u-flex">
							<u-icon name="eye-fill" size="30"></u-icon>
							<view class="u-m-l-10">{{item.visit}}</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<Loadmore :status="status"></Loadmore>
		<view style="height: 200rpx;"></view>
		<Bottom :isReturn="true" @confirm="confirm"></Bottom>
		
		<!-- 刷新排名 -->
		<u-popup v-model="refreshData.show" :mask-close-able="false" mode="center" border-radius="10" width="80%">
			<view class="u-p-24">
				<view class="u-font-34 u-color-red u-font-bold">温馨提示</view>
				<view class="u-font-28 u-m-t-30 u-text-line-15">{{ refreshData.text }}</view>
				<view class="u-m-t-50 u-flex u-row-between">
					<u-button @click="refreshData.show = false" :custom-style="endDemandBtn" size="medium" class="sidebar_save_btn">取消
					</u-button>
					<u-button @click="onRefreshRank" :custom-style="editDemandBtn" class="sidebar_save_btn" size="medium" type="primary">确定
					</u-button>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import Navbar from '@/components/Navbar.vue'
	import Bottom from '@/components/Bottom.vue'										
	import Loadmore from '@/components/Loadmore.vue'
	import { mySupplyInfo, supplyStandard, getstandard, useRefresh } from '@/network/demand.js'
	export default{
		components:{
			Navbar,
			Bottom,
			Loadmore
		},
		data(){
			return{
				tabList:[{name:'我发布的'},{name:'我对接的'}],
				current:0,
				list: [],
				status: 'loadmore',
				refreshData:{
					id: 0,
					show: false,
					text: ""
				},
				endDemandBtn: {
					background: "#fff",
					border: "none",
					color: "#fb6316",
					width: "100%"
				},
				editDemandBtn: {
					width: "100%",
					background: "#fb6316"
				}
			}
		},
		onLoad(){
			this.getMySupplyList()
			this.getRefreshBase()
		},
		methods:{
		    async getRefreshBase(){
				const res = await getstandard()
				this.refreshData.text = res.data.msg
			},
			tabChange(val){
				this.current = val
				this.list.length = 0
				this.getMySupplyList()
			},
			async getMySupplyList(){
				uni.showLoading({
					title: "加载中"
				})
				const params = {
					user_id: uni.getStorageSync("user_id"),
					result_type: this.current == 0 ? 1 : 2
				}
				const res = await mySupplyInfo(params)
				if(res.data.length > 0){
					res.data.map(item=>{
						switch(Number(item.demand_status)){
							case 0:
							    item.demand_name = '待审核'
								break;
							case 1:
							    item.demand_name = '待沟通'
								break;
							case 2:
							    item.demand_name = '对接中'
								break;
							case 3:
							    item.demand_name = '已解决'
								break;
							case 4:
							    item.demand_name = '未通过'
								break;
							case 5:
							    item.demand_name = '已过期'
								break;
						}
						this.list.push(item)
					})
				}
				if(res.data.length < 10) this.status = 'nomore'
				uni.hideLoading()
			},
			openRefresh(id){
				this.refreshData.id = id
				this.refreshData.show = true
			},
			async onRefreshRank(){
				const params = {
					user_id: uni.getStorageSync("user_id"),
					type: 2,
					t_id: this.refreshData.id,
				}
				const res = await useRefresh(params)
				uni.showToast({
					icon: "none",
					duration: 3000,
					title: '刷新成功'
				})
				this.refreshData.show = false
			},
			goDemandDetail(val){
				if(['0',0].includes(val.demand_status)){
					return
				}else{
					uni.navigateTo({
						url: "/operate/demandDetail/demandDetail?id=" + val.id
					})
				}
			}
		}
	}
</script>

<style scoped>
	.status-box{
		padding: 4rpx 10rpx;
		font-size: 22rpx;
		border: 1rpx solid #fb6316;
		background: #fff;
		color: #fb6316;
		border-radius: 10rpx;
		margin-right: 10rpx;
	}
</style>